
@rate: 1rem/40;

.background  {
  width: 100%;
  padding-top: 513 * @rate;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/bg.png");
  background-color: rgb(41,66,236);
  .bg-absolute {
    position: absolute;
  }
  #tab-box {
    display: none;
    height: 70 * @rate;
  }
  #tab::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 1200 * @rate;
    height: 70 * @rate;
    background-image: linear-gradient(-90deg, 
		#015eea 0%, 
		#00c0fa 100%);
    box-shadow: 0 13 * @rate 13 * @rate 0 
      rgba(8, 62, 121, 0.52);
    border-radius: 35 * @rate;
  }
  #tab .p-relative {
    z-index: 1;
  }
  .tab {
    width: 1200 * @rate;
    // padding: 0 57 * @rate;
  }
  
  .tab.tab-fixed {
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .back-top {
    position: fixed;
    right: 0;
    bottom: 200 * @rate;
    width: 80 * @rate;
    height: 80 * @rate;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    font-size: 20 * @rate;
    z-index: 999;
    cursor: pointer;
  }
  .tab-list {
    cursor: pointer;
    font-size: 18 * @rate;
    height: 70 * @rate;
    flex: 1;
    &:first-child {
      &.tab-list-active {
        border-radius: 35 * @rate 0 0 35 * @rate;
      }
    }
    &:last-child {
      &.tab-list-active {
        border-radius: 0 35 * @rate 35 * @rate 0;
      }
    }
    &-active {
      background-image: linear-gradient(-90deg, 
      #f7971e 0%, 
      #ffd200 100%);
      font-size: 24 * @rate;
      font-weight: bold;
    }
  }
  .container {
    width: 1200 * @rate;
  }
  .se-title  {
    font-size: 60 * @rate;
    text-shadow: 0 5 * @rate 5 * @rate 
		rgba(91, 91, 91, 0.75);
    img {
      width: 156 * @rate;
      height: 53 * @rate;
      margin-top: 8 * @rate;
      &.se-img1-55 {
        margin-right: 55 * @rate;
      }
      &.se-img2-55 {
        margin-left: 55 * @rate;
      }
      &.se-img1-50 {
        margin-right: 50 * @rate;
      }
      &.se-img2-50 {
        margin-left: 50 * @rate;
      }
    }
  }
  .title-tips {
    font-size: 24 * @rate;
    margin: 33 * @rate 0 60 * @rate;
  }
  .btn {
    width: 420 * @rate;
    height: 60 * @rate;
    background-image: linear-gradient(0deg, 
		#015eea 0%, 
		#00c0fa 100%);
	  box-shadow: 0px 25 * @rate 27 * @rate 0px 
		#0c2ca8;
    border-radius: 30 * @rate;
    font-size: 20 * @rate;
    color: #fff;
    &:hover {
      will-change: transform;
      transition: all 0.1s;
      transform: translateY(-10 * @rate);
    }
  }
  .btn2 {
    margin-left: 40 * @rate;
    background-image: linear-gradient(0deg, 
		#f7971e 0%, 
		#ffd200 100%);
  }
  .swiper-container {
    padding-bottom: 50 * @rate;
    .swiper-pagination {
      bottom: 0;
      .swiper-pagination-bullet {
        width: 12 * @rate;
        height: 12 * @rate;
        background-color: #eeeeee;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          width: 17 * @rate;
          height: 17 * @rate;
          border: solid 4 * @rate #05eefe;
          background: none;
        }
      }
    }
  }

  .section-background {
    background-color: #0658b0;
  }
  .section1 {
    padding: 65 * @rate 0 60 * @rate;
    .o-content {
      margin-top: 50 * @rate;
      height: 440 * @rate;
      .absolute-center {
        width: 177 * @rate;
        height: 177 * @rate;
      }
      .o-list {
        &-t1 {
          opacity: 0.1;
          font-size: 81 * @rate;
          line-height: 1;
        }
        &-t2 {
          margin-top: -50 * @rate;
          font-size: 60 * @rate;
          line-height: 1;
        }
        &-content {
          width: 632 * @rate;
	        height: 350 * @rate;
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/o1.png");
          margin-top: -30 * @rate;
          padding: 63 * @rate 140 * @rate 20 * @rate 58 * @rate;
          font-size: 16* @rate;
	        line-height: 30* @rate;
        }
        &.o-list2 {
          right: 0;
          .o-list-content {
            padding: 63 * @rate 40 * @rate  20 * @rate 170 * @rate;
            background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/o3.png");
          }
        }
        &-circle::before {
          content: "";
          width: 4 * @rate;
          height: 4 * @rate;
          border: solid 3 * @rate #ffffff;
          border-radius: 50%;
          position: absolute;
          top: 0;
          transform: translateY(100%);
          left: -20 * @rate;
        }
      }
    }
    .o-btn {
      margin-top: 38 * @rate;
    }
  }

  .section2 {
    padding: 84 * @rate 0 80 * @rate; 
    .t-content {
      margin-top: 63 * @rate;
      margin-bottom: 65 * @rate;
      .t-list {
        width: 291 * @rate;
        height: 183 * @rate;
        font-size: 16 * @rate;
        padding-left: 8 * @rate;
        &:hover {
          will-change: transform;
          transition: transform 1s;
          transform: translateY(-10 * @rate);
        }
        &.t-list-active {
          position: relative;
          top: -10 * @rate;
        }
        &.t-list1 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t1.png");
          .t-list-c {
            color: #0a4990;
          }
          .t-list-t,.t-list-btn {
            background-color: #0c7cf5;
          }
        }
        &.t-list2 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t2.png");
          .t-list-t,
          .t-list-btn {
            background-color: #075bb6;
          }
        }
        &.t-list3 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t3.png");
          .t-list-t,
          .t-list-btn  {
            background-color: #c14431;
          }
        }
        &.t-list4 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t4.png");
          .t-list-c {
            color: #09694b;
          }
          .t-list-t,
          .t-list-btn  {
            background-color: #268622;
          }
        }
        &.t-list5 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t5.png");
          .t-list-c {
            color: #227224;
          }
          .t-list-t,
          .t-list-btn  {
            background-color: #25c129;
          }
        }
        &.t-list6 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t6.png");
          .t-list-t,
          .t-list-btn  {
            background-color: #b23838;
          }
        }
        &.t-list7 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t7.png");
          .t-list-c {
            color: #96330c;
          }
          .t-list-t,
          .t-list-btn  {
            background-color: #96730c;
          }
        }
        &.t-list8 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/t8.png");
          .t-list-t,
          .t-list-btn  {
            background-color: #3036ab;
          }
        }
        &-t {
          padding: 10 * @rate 30 * @rate 10 * @rate 24 * @rate;
          line-height: 45* @rate;
          border-radius: 0px 0px 30 * @rate 0px;
          font-size: 24* @rate;
          line-height: 1;
          display: inline-block;
        }
        &-c {
          padding-left: 22 * @rate;
          font-size: 16* @rate;
          margin: 22 * @rate 0 16 * @rate;
        }
        &-btn {
          width: 119 * @rate;
          height: 30 * @rate;
          border-radius: 15 * @rate;
          margin-left: 22 * @rate;
          animation: isBiling 0.5s infinite;
          @keyframes isBiling {
            0% {
              transform: scale(0.95);  
            }
            50% {
              transform: scale(1.05);  
            }
            100% {
              transform: scale(0.95);  
            }
          }
          img {
            width: 15 * @rate;
	          height: 20 * @rate;
            margin-left: 6 * @rate;
          }
        }
      }
    }
  }

  .section3 {
    padding-top: 65 * @rate;
    .th-content {
      &-tab {
        &-list {
          opacity: 0.8;
          transform: scale(0.9);
          &.th-content-tab-active {
            opacity: 1;
            transform: scale(1);
          }
        }
        &-list1 {
          width: 195 * @rate;
          height: 267 * @rate;
          margin-top: 10 * @rate;
        }
        &-list3 {
          width: 261 * @rate;
          height: 523 * @rate;
        }
        &-list2 {
          width: 266 * @rate;
          height: 494 * @rate;
        }
        &-list4 {
          width: 323 * @rate;
          height: 551 * @rate;
        }
        &-list-b1 {
          width: 235 * @rate;
          height: 496 * @rate;
        }
        &-list-b2 {
          width: 187 * @rate;
          height: 409 * @rate;
        }
        &-list-b3 {
          width: 206 * @rate;
          height: 432 * @rate;
        }
        &-list-c1 {
          width: 210 * @rate;
          height: 452 * @rate;
        }
        &-list-c2 {
          width: 279 * @rate;
          height: 454 * @rate;
        }
        &-list-c3 {
          width: 220 * @rate;
          height: 349 * @rate;
        }
      }
      &-detail {
        width: 100%;
        height: 360 * @rate;
        border: solid 2 * @rate #0cdaff;
        margin-top: -320* @rate;
        padding: 0 70 * @rate 0 105 * @rate;
        background-color: #2e48f4;
        &-btns {
          font-size: 16 * @rate;
        }
        .th-detail {
          font-size: 16 * @rate;
          line-height: 30 * @rate;
          display: none;
          &.th-detail-active {
            display: flex;
          }
          .video-box{
            width: 370 * @rate;
            margin-right: 40 * @rate;
            img {
              width: 370 * @rate;
              height: 215 * @rate;
            }
            video {
              width: 370 * @rate;
              height: 215 * @rate;
            }
            div {
              line-height: 34 * @rate;
              background-color: #1228bc;
              padding: 0 15 * @rate;
              width: 370 * @rate;
            }
          }
          &-name {
            color: #fffd5f;
            margin-bottom: 25 * @rate;
            width: 670 * @rate;
            span {
              font-size: 22 * @rate;
              line-height: 1;
              padding-right: 10 * @rate;
            }
          }
        }
      }
      .th-btn {
        margin-top:  72 * @rate;
        font-size: 26 * @rate;
        div {
          cursor: pointer;
          width: 560 * @rate;
          height: 80 * @rate;
          box-shadow: 0px 25 * @rate 27 * @rate 0px 
            #1329b0;
          border-radius: 40 * @rate 0px 40 * @rate 0px;
          &.th-btn1{
            background-image: linear-gradient(0deg, 
          #209cff 0%, 
          #68e0cf 100%);
          }
          &.th-btn2 {
            background-image: linear-gradient(180deg, 
          rgba(242, 142, 38, 1) 0%, 
          #fd644f 100%);
          }
          &.th-btn3 {
            background-image: linear-gradient(0deg, 
            #ec008c 0%, 
            #fc6767 100%);
          }
          &.th-btn4 {
            background-image: linear-gradient(180deg, 
          #0bbafb 0%, 
          #4285ec 100%);
          }
        }
      }
      .th-content2 {
        margin: 72 * @rate 0 80 * @rate;
        .th-btn {
          margin-bottom: 42 * @rate;
        }
        .th-content-detail {
          margin-top: -300 * @rate;
        }
        &-detail {
          &-list {
            display: none;
            &.th-content2-detail-list-active {
              display: block;
            }
            &1 {
              .th-content-detail {
                margin-top: -220 * @rate;
              }
            }
            &2 {
              .th-content-detail {
                margin-top: -180 * @rate;
              }
            }
          }
        }
      }
      .th-content3 {
        .th-btn {
          margin: 50 * @rate 0;
        }
        &-title {
          font-size: 40 * @rate;
        }
        &-time {
          font-size: 22 * @rate;
          color: #1228bc;
          width: 384 * @rate;
          height: 48 * @rate;
          background-color: #0cdaff;
          margin: 45 * @rate auto 0;
        }
        .th-content-detail {
          margin-top: 0;
        }
        .th-detail-name {
          margin-bottom: 10 * @rate;
          height: 55 * @rate;
          .bg-absolute {
            bottom: 0;
            font-size: 16 * @rate;
          }
        }
        .th-detail-msg {
          div {
            div {
              margin-top: 20 * @rate;
              span {
                color: #faf866;
              }
            }
          }
        }
      }
    }
  }

  .section4 {
    padding: 65 * @rate 0 50 * @rate;
    .f-content {
      margin-top: 50 * @rate;
      height: 280 * @rate;
      .f-list {
        width: 294 * @rate;
        // height: 187 * @rate;
        overflow: hidden;
        line-height: 36 * @rate;
        font-size: 16 * @rate;
        background-color: #0036b2;
        video {
          width: 294 * @rate;
          height: 151 * @rate;
        }
        img {
          width: 294 * @rate;
          height: 151 * @rate;
        }
      }
    }
  }

  .section5 {
    padding: 83 * @rate 0 100 * @rate;
    .fi-content {
      margin-top: 73 * @rate;
      height: 620 * @rate;
      .fi-list {
        width: 520 * @rate;
        height: 267 * @rate;
        padding: 25 * @rate 15 * @rate 22 * @rate 370 * @rate;
        background-repeat: no-repeat;
        &:nth-child(1) {
          margin-bottom: 30 * @rate;
        }
        &1 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s1.png");
        }
        &2 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s2.png");
        }
        &3 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s3.png");
        }
        &4 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s4.png");
        }
        &5 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s5.png");
        }
        &6 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s6.png");
        }
        &7 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s7.png");
        }
        &8 {
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/s8.png");
        }

        > div{
          width: 142 * @rate;
          height: 219 * @rate;
          font-size: 14 * @rate;
          background: #fff;
          padding-left: 13 * @rate;
        }

        &-title {
          font-size: 18 * @rate;
          margin-bottom: 20 * @rate;
        }
      }
    }
  }
  .section10 {
    padding: 40 * @rate 0;
    .section-background {
      background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/meiguogaokao/images/n-bg.png");
      background-color: none;
      background-repeat: no-repeat;
    }
    .se-c {
      margin-top: 45 * @rate;
    }
  }
}

@media screen and (min-width:980px) {
  .background {
    .section2 {
      .t-list:nth-child(n+5) {
        margin-top: 22 * @rate;
      }
    }
    .section3 {
      padding-top: 65 * @rate;
      .th-content {
        margin: 67 * @rate 0 50 * @rate;
        &-detail {
          border-radius: 160 * @rate 0px 160 * @rate 0px;
          &-btns {
            top: 34 * @rate;
            right: 25 * @rate;
            div {
              width: 150 * @rate;
              margin: 0;
            }
            div:last-child {
              margin: 13 * @rate 0 0 0;
            }
          }
        }
        .th-content3 { 
          .th-detail-name {
            .bg-absolute {
              right: 150 * @rate;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width:979px) {
  .background  {
    background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/images/bg-m.png");
    padding-top: 598 * @rate;
    .container {
      width: 750 * @rate;
    }
    .btn {
      width: 330 * @rate; 
    }
    #tab::after {
      width: 750 * @rate;
    }
    .tab {
      width: 750 * @rate;
    }
    .tab-list {
      width: 108 * @rate;
      white-space: nowrap;
      font-size: 26 * @rate;
    }
    .se-title {
      font-size: 40 * @rate;
      img {
        width: 101 * @rate;
        height: 35 * @rate;
        margin-top: 4 * @rate;
        &.se-img1-55 {
          margin-right: 25 * @rate;
        }
        &.se-img2-55 {
          margin-left: 25 * @rate;
        }
        &.se-img1-50 {
          margin-right: 20 * @rate;
        }
        &.se-img2-50 {
          margin-left: 20 * @rate;
        }
      }
    }
    .section1 {
      .o-content {
        margin: 40 * @rate 20 * @rate 0;
        height: 950 * @rate;
        .o-list {
          &-t2 {
            position: relative;
            z-index: 2;
          }
          &-content {
            width: 728 * @rate;
            height: 404 * @rate;
            font-size: 28 * @rate;
            line-height: 32 * @rate;
            padding: 70 * @rate 100 * @rate 20 * @rate  60 * @rate;
          }
          &.o-list2 {
            top: 460 * @rate;
            .o-list-content { 
              padding: 72 * @rate 28 * @rate 0 140 * @rate;
            }
          }
        }
        .absolute-center{
          transform: translate(-170%,-50%);
        }
      }
    }
    .section2 {
      .t-content {
        margin: 63 * @rate 10 * @rate 65 * @rate;
        .t-list {
          width: 357 * @rate;
          height: 222 * @rate;
          &:nth-child(n+3) {
            margin-top: 24 * @rate;
          }
          &-c {
            font-size: 26 * @rate;
          }
        }
      }
    }
    .section3 { 
      .se-title {
        img {
          margin: 8 * @rate 5 * @rate 0;
        }
      }
      .th-content {
        margin: 30 * @rate 10 * @rate 50 * @rate;
        &-tab {
          &-list {
            opacity: 0.8;
            transform: scale(0.7);
            &.th-content-tab-active {
              opacity: 1;
              transform: scale(0.8);
            }
          }
          &-list1 {
            margin-top: 35 * @rate;
          }
        }
        .th-content1 {
          .th-content-tab {
            img {
              &:nth-child(n+2) {
                margin-left: -100 * @rate;
              }
            }
          }
        }
        &-detail {
          padding: 0;
          border-radius: 40px;
          height: 900 * @rate;
          margin-top: -340* @rate;
          font-size: 26 * @rate;
          &-btns {
            bottom: 34 * @rate;
            left: 50%;
            transform: translate(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .th-detail { 
            flex-wrap: wrap;
            width: 690 * @rate;
            height: 800 * @rate;
            padding: 38 * @rate 20 * @rate 60 * @rate;
            font-size: 26 * @rate;
            .video-box{
              margin-right: 0;
              video {
                width: 650 * @rate;
                height: 245 * @rate;
              }
              img {
                width: 650 * @rate;
                height: 245 * @rate;
              }
              div {
                width: 650 * @rate;
                line-height: 46 * @rate;
              }
            }
            &-name {
              span {
                font-size: 26 * @rate;
              }
            }
            &-msg {
              font-size: 26 * @rate;
            }
          }
        }
        .th-btn {
          margin-top:  72 * @rate;
          font-size: 26 * @rate;
          line-height: 1;
          div {
            width: 361 * @rate;
          }
        }
        .th-content3 { 
          .th-detail-name {
            .bg-absolute {
              right: 30 * @rate;
            }
          }
        }
      }
    }

    .section4 {
      .f-content {
        margin: 65 * @rate 10* @rate 0;
        .f-list {
          width: 361 * @rate;
          line-height: 43 * @rate;
          video {
            width: 361 * @rate;
            height: 186 * @rate;
          }
          img {
            width: 361 * @rate;
            height: 186 * @rate;
          }
          div {
            div {
              transform: scale(0.9);
            }
          }
        }
        .swiper-slide {
          display: flex;
          justify-content: center;
        }
      }

    }
    .section5 {
      .fi-content {
        height: 800 * @rate;
          .swiper-slide {
            .fi-list {
              padding: 58 * @rate 0 0 527 * @rate;
              width: 730 * @rate;
              height: 348 * @rate;
              margin: 0 auto;
              > div{
                width: 185 * @rate;
                height: 255 * @rate;
                padding-right: 15 * @rate;
                padding-bottom: 22 * @rate;
              }
            }
        }
      }
    }
    .section10 {
      .section-background {
        background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/meiguogaokao/images/n-bg-m.png");
      }
    }
  }
}